<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue'
// import { Editor } from '@textbus/xnote'
import 'katex/dist/katex.css'
import '@textbus/xnote/bundles/index.css'

import {
  InlineToolbarPlugin,
  LeftToolbarPlugin,
  StaticToolbarPlugin,
  SuspensionToolbarPlugin,
  Editor
} from '@textbus/xnote'

// 行内工具条，会根据用户的框选自动弹出
const inlineToolbarPlugin = new InlineToolbarPlugin({
  // 主题：可选，可配置 dark，默认为 light
  theme: 'light'
})



let editor:any = null
const editorRef = ref()

onMounted(() => {
  // // 悬浮工具条，会根据用户的滚动，自动展示在文档可视区域的顶部
  // const suspensionToolbarPlugin = new SuspensionToolbarPlugin({
  //   // 主题：可选，可配置 dark，默认为 light
  //   theme: 'light'
  // })
  const leftToolbarPlugin = new LeftToolbarPlugin()
  // 静态工具条，适用于普通编辑器顶部的工具条
  const staticToolbarPlugin = new StaticToolbarPlugin({
    // 静态工具条需要一个放置工具的容器，
    host: document.getElementById('toolbar')  as HTMLElement ,
    // 主题：可选，可配置 dark，默认为 light
    theme: 'light'
  })
  console.log(document.getElementById('toolbar'))
  editor = new Editor({
    plugins: [
   
      staticToolbarPlugin,
      
      // suspensionToolbarPlugin
    ]
  })

  editor.mount(editorRef.value).then(() => {
    console.log('编辑器创建完成')
  })
})

onUnmounted(() => {
  editor.destroy()
})
</script>
<template>
 <div id="toolbar" ></div>
  <div ref="editorRef" id="editorRef" class="w-2/3 h-2/3">
   
  </div>
</template>
<style>
#toolbar {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 50px;
  /* background-color: #f0f; */
}

#editorRef {
  margin: 0 auto;
}
</style>
